<template>
    <div>
        <el-card>
            <table id="customers" width="88%">
                <tr>
                    <th>订单号</th>
                    <th>用户手机号</th>
                    <th>下单时间</th>
                    <th>支付时间</th>
                    <th>商品金额</th>
                    <th>快递费用</th>
                    <th>结算价</th>
                    <th>支付状态</th>
                    <th>物流状态</th>
                    <th>卡券抵扣</th>
                    <th>现金支付</th>
                </tr>
                <tr>
                    <td>{{ order.tradeno }}</td>
                    <td>{{ order.mobile }}</td>
                    <td>{{ order.addTime }}</td>
                    <td>{{ order.paymentTime }}</td>
                    <td>{{ order.orderAmount }}</td>
                    <td>{{ order.expressFee }}</td>
                    <td>{{ order.settleAmount }}</td>
                    <td>{{ order.payStatusText }}</td>
                    <td>{{ order.expressStatusText }}</td>
                    <td>{{ order.discount }}</td>
                    <td>{{ order.cashPay }}</td>
                </tr>
                <tr>
                    <th>用户备注：</th>
                    <th colspan="10"><el-input type="textarea" v-model="order.memberRemark" rows="2" ></el-input></th>
                </tr>
            </table>
        </el-card>
        <el-card style="margin-top:5px;" shadow="hover">
            <table id="customers" width="88%">
                <tr>
                    <th>收货人姓名</th>
                    <th>收货人手机号</th>
                    <th>收货省份</th>
                    <th>收货城市</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>{{ address.realName }}</td>
                    <td>{{ address.mobile }}</td>
                    <td>{{ address.provincename }}</td>
                    <td>{{ address.cityname }}</td>
                    <td>{{ address.countyname }}-{{ address.address }}</td>
                </tr>
            </table>
        </el-card>

            <el-table :data="orderItemList" border stripe>

                <el-table-column label="图片" prop="logo" width="116">
                     <template slot-scope="scope">
                         <img style="width: 90px;height: 120px;vertical-align: middle;border:1px solid #FFB6C1;border-radius:6px"
                            :src="imgBaseUrl + scope.row.logo +'?iopcmd=thumbnail&type=4&width=90'"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="productName"></el-table-column>
                <el-table-column label="规格" prop="skuName" width="100"></el-table-column>
                <el-table-column label="购买数量" prop="qty" width="50"></el-table-column>
                <el-table-column label="退款数量" prop="refundQty" width="60">
                     <template slot-scope="scope">
                         <el-tag type="warning">{{scope.row.refundQty}}</el-tag>
                     </template>
                </el-table-column>
                <el-table-column label="卖价" prop="sellPrice" width="70"></el-table-column>
                <el-table-column label="结算价" prop="costPrice" width="75"></el-table-column>
                <el-table-column label="期望送达时间" width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.deliveryDate}}<br/>{{scope.row.deliveryHour}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="生日会" prop="birthdayTxt" width="120"></el-table-column>
                <el-table-column label="用户备注" prop="memberRemark" width="140"></el-table-column>
                <el-table-column label="物流设置" prop="expressNo">
                     <template slot-scope="scope">
                         <el-input v-model="scope.row.expressNo" v-if="order.payStatus=='S'" placeholder="输入物流单号"
                             @change="setExpressNo(scope.row.id, scope.row.expressNo)"/> <br/> <br/>
                         <el-select v-model="scope.row.expressStatus" v-if="order.payStatus=='S'" placeholder="设置物流状态"
                         @change="setExpressStatus(scope.row.id, scope.row.expressStatus)" style="width:140px;">
                            <el-option key="wait"  label="等发货" value="wait" />
                           <el-option key="notify_send"  label="通知发货中" value="notify_send" />
                           <el-option key="send"  label="已发货" value="send" />
                           <el-option key="receive"  label="已收货" value="receive" />
                           <el-option key="refund"  label="已退款" value="refund" />
                           <el-option key="refund"  label="退款处理中" value="ing_refund" />
                        </el-select>
                        <el-link v-if="order.payStatus=='S' && scope.row.expressNo" @click="showExpressInfo(scope.row.expressNo)" type="warning" style="margin-left:15px;">查看</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="物流信息" :visible.sync="showExpressDia" width="64%">

                <span slot="footer" class="dialog-footer">
                    <el-timeline :reverse="reverse">
                    <el-timeline-item  placement="top"
                        v-for="(activity, index) in expressInfoList"
                        :key="index"
                        :timestamp="activity.time" type="warning" style="text-align:left">
                        {{activity.context}}
                    </el-timeline-item>
                </el-timeline>
                    <el-button @click="showExpressDia = false">关闭</el-button>
                </span>
            </el-dialog>

    </div>
</template>

<script>
import Api from "@/api/Api.js";
export default {
    data() {
        return {
            imgBaseUrl: this.$global.imgBaseUrl,
            tradeno:'',
            showExpressDia:false,
            showElecCoupon:false,
            reverse:false,
            expressInfoList:[],
            order: {},
            vendor: {},
            address: {},
            orderItemList: [],
            elecCouponList: [],
            couponTradeItemList:[],
            elecManualList:[],
            hasElecManual:false,
            addElecManualVisible: false,
            addElecManualForm: {
                id: "",
                v: "",
                k: "",
                tradeno:this.$route.query.tradeno
            },
            addElecManualRules: {
                value: [
                    {
                        required: true,
                        message: "请输入value",
                        trigger: "change",
                    }
                ]
            }
        };
    },
    watch: {

    },
    created() {
       this.orderId = this.$route.query.orderId;
       this.getMallSubOrderDetail();
    },
    methods: {
        getMallSubOrderDetail() {
            Api.getMallSubOrderDetail({'orderId':this.orderId}).then((res) => {
                if (res.success) {
                    this.order = res.data.order;
                    this.address = res.data.address;
                    this.vendor = res.data.vendor;
                    this.orderItemList = res.data.orderItemList;
                } else {
                    return this.$message.error("获取订单失败");
                }
            });
        },
        setExpressNo(id,expressNo) {
            Api.setMallSubOrderExpressNo({'id':id, 'expressNo':expressNo}).then((res) => {
                if (res.success) {
                     this.getMallSubOrderDetail();
                } else {
                    return this.$message.error("设置失败");
                }
            });
        },
        setExpressStatus(id,expressStatus) {
            Api.setMallSubOrderExpressStatus({'id':id, 'expressStatus':expressStatus}).then((res) => {
                if (res.success) {
                     this.getMallSubOrderDetail();
                } else {
                    return this.$message.error("设置失败");
                }
            });
        },
        showExpressInfo(expressNo) {
            this.expressInfoList=[],
            Api.showExpressInfo({'expressNo':expressNo,'mobile':this.address.mobile}).then((res) => {
                if (res.success) {
                     this.showExpressDia=true;
                     this.expressInfoList = res.data;
                } else {
                    return this.$message.error("获取失败:" + res.msg);
                }
            });
        },
        setMallSubOrderRemark(expressNo) {
            Api.setMallSubOrderRemark({'tradeno':this.tradeno,'remark':this.order.remark}).then((res) => {
                if (res.success) {
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },
        setMallSubOrderShowMemberRemark() {
            Api.setMallSubOrderShowMemberRemark({'tradeno':this.tradeno,'showMemberRemark':this.order.showMemberRemark}).then((res) => {
                if (res.success) {
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },
        saveElecManual() {
            Api.saveElecManual(this.addElecManualForm).then((res) => {
                if (res.success) {
                    this.getMallSubOrderDetail();
                    this.addElecManualVisible = false;
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },
        editElecManual(info) {
            Api.getElecManual({
                id: info.id,
            }).then((res) => {
                if (res.success) {
                    this.addElecManualVisible = true;
                    this.addElecManualForm = JSON.parse(JSON.stringify(res.data));
                }
            });
        },
        addElecManual() {
            this.addElecManualVisible = true;
            this.addElecManualForm.id='';
            this.addElecManualForm.k = '';
            this.addElecManualForm.v = '';
        },
    }
};
</script>

<style>
.form_ipt {
    width: 450px;
}
#customers {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
}
</style>
